<template>
	<view class="boox">
		<view class="cont">
			<!-- 图片 -->
			<view class="img">
				<image :src="imageurl" alt="" />
				<view class="till">
					今日疯抢
				</view>
			</view>
			<!-- 名称 -->
			<view class="title1" style="font-weight: bolder;padding: 10rpx;">
				{{title1}}
			</view>
			<!-- 物品介绍 -->
			<view class="title2" style="color: rgba(132, 132, 132, 0.3);padding: 10rpx;">
				{{title2}}|{{title3}}|{{title4}}
			</view>
			<!-- 券 -->
			<view class="quan" style="padding: 10rpx;">
				<view class="s-tit" style="color: #f1ad7e;border:2px solid #f1ad7e;font-size: 20rpx; width: 90rpx;height: 35rpx; text-align: center;align-items: center; 
				margin-right: 10rpx;border-radius: 5rpx;padding-top: -1px;">
					{{title5}}
				</view>
				<view class="l-tit"
					style="border:2px solid #4fbf7b;font-size: 20rpx; width: 130rpx;height: 35rpx; text-align: center;align-items: center;display: flex;padding-left:-5rpx;border-radius: 5rpx;">
					<view style="width: 50rpx; background-color: #4fbf7b; color: white;margin-left: -2px; height: 35rpx; padding-top:1px;">{{title9}}
					</view>
					<view style="padding-left: 10rpx; color: #4fbf7b;">{{title8}}</view>
				</view>
			</view>
			<!-- 价钱 -->
			<view class="foot">
				<view class="left">
					<view class="price">
						<text style="color: #f1ad7e;font-weight: bolder;">￥{{title6}}</text><text
							style="color: rgba(132, 132, 132, 0.3);">/{{title7}}</text>
					</view>
					<view class="btn">
						<button class="btn">+</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			imageurl: String,
			title1: String,
			title2: String,
			title3: String,
			title4: String,
			title5: String,
			title9: String,
			title6: String,
			title7: String,
			title8:String,
		},
		data() {
			return {
			}
		},
		methods: {

		},
		onLoad() {
			console.log(this.imageurl);
			
		}
	}
</script>

<style lang="scss" scoped>
	.cont {
		width: 100%;
		background-color: white;
		border-radius: 10%;

		.img {
			width: 100%;
			position: relative;
			

			image {
				width: 100%;
				height: 260rpx;
				border-radius: 10%;
				box-shadow: 0px 5px 10px rgba(132, 132, 132, 0.8);
			}

			.till {
				width: 150rpx;
				height: 50rpx;
				text-align: center;
				line-height: 50rpx;
				font-size: 25rpx;
				font-weight: bolder;
				color: white;
				border-top-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
				background-color: #e9a277;
				position: absolute;
				top: 0rpx;
			}
		}

		.title1 {
			font-weight: bolder;
			font-size: 30rpx;
		}

		.title2 {
			width: 100%;
			font-size: 25rpx;
		}

		.quan {
			display: flex;
		}

		.foot {
			.left {
				padding: 10rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					margin-right: 20rpx;

					.btn {
						width: 50rpx;
						height: 50rpx;
						padding-left: 12rpx;
						color: white;
						line-height: 50rpx;
						background: linear-gradient(to bottom right, green, white);
						border-radius: 50%;
					}
				}
			}
		}
	}
</style>